<template>
  <div>
    <div class="samples-info-box role-title">
      <div :class="titleData.class">
        <span class="label">{{ titleData.roleNameLabel }}</span>
        <span>{{ roleName }}</span>
      </div>
      <div v-if="system!=='运营平台'">
        <span class="label">{{ titleData.deptNameLabel }}</span>
        <span>{{ deptName }}</span>
      </div>
    </div>
    <roleTab
      v-if="showComp"
      ref="roleTab"
      :role-type="roleType"
      :role-id="roleId"
      :dept-id="deptId"
      :role-name="roleName"
      :op-submit-api="opSubmitApi"
      :op-label="opLabel"
      :data-label="dataLabel"
      :data-tree-prop="dataTree"
      :op-checked="opChecked"
      :op-tree-prop="opTree"
      :expend-op="expendList.opTree"
      :expend-data="expendList.dataTree"
      v-on="$listeners"
    />
  </div>
</template>

<script>
// mgr平台的全部获取树的接口
const treeApiMap_mgr = {
  page: {
    dataTree: 'getPageDataApi',
    opTree: 'getPageOpApi'
  },
  api: {
    dataTree: 'getApiDataApi',
    opTree: 'getApiOpApi'
  }
}
// admin平台的全部获取树的接口
const treeApiMap_admin = {
  运营平台: {
    page: 'getPageOpApi',
    api: 'getApiOpApi'
  },
  租户角色: {
    page: 'getTenantPageOpApi',
    api: 'getTenantApiOpApi'
  }
}
const submitApiMap = {
  operate: {
    page: 'editPageOpApi',
    api: 'editApiOpApi'
  },
  tenant: {
    page: 'editTenantPageOpApi',
    api: 'editTenantApiOpApi'
  }
}
const opLabelMap = {
  page: '页面操作权限',
  api: 'API访问权限'
}
const dataLabelMap = {
  page: '页面数据权限',
  api: 'API数据权限'
}
import * as mgr from '@/api/tenantManage/role'
import * as admin from '@/api/maintainMag/operateRole'
import roleTab from '@/components/roleComps/roleTabTree'
export default {
  components: { roleTab },
  props: {
    system: {
      type: String,
      default: '',
      required: true
    },
    pageType: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      // 判断子组件必须的接口都调用完毕
      showComp: false,
      deptId: '',
      // 组件需要调用的api，分为数据树和操作树
      compApi: {
        opTree: '',
        dataTree: ''
      },
      // 角色id
      roleId: '',
      // 角色名称
      roleName: '',
      // 部门/组织机构名称
      deptName: '',
      // 顶部展示栏所用到的数据
      titleData: {
        // 角色名称前的label文字
        roleNameLabel: '',
        // 部门/组织机构名称前的label文字
        deptNameLabel: '',
        // 标题部分的class
        class: ''
      },
      // roleTab组件所用到的全部props
      roleType: '',
      opSubmitApi: '',
      // 操作树tab名称
      opLabel: opLabelMap[this.pageType],
      // 操作树
      opTree: [],
      // 操作树被选中的id
      opChecked: [],
      // 数据树tab名称
      dataLabel: dataLabelMap[this.pageType],
      // 数据树
      dataTree: [],
      // 默认展开第一级
      expendList: {
        opTree: [],
        dataTree: []
      }
    }
  },

  computed: {},
  created() {
    switch (this.system) {
      case '运营平台':
        this.titleData.roleNameLabel = '运营平台角色名称：'
        this.titleData.deptNameLabel = ''
        this.titleData.class = ''
        this.compApi = admin
        this.opSubmitApi = submitApiMap['operate'][this.pageType]
        this.roleType = 'adminRole'
        break
      case '租户角色':
        this.titleData.roleNameLabel = '租户角色名称：'
        this.titleData.deptNameLabel = '所属租户：'
        this.titleData.class = 'title-bottom'
        this.compApi = admin
        this.opSubmitApi = submitApiMap['tenant'][this.pageType]
        this.roleType = 'adminRole'
        break
      case '租户中台':
        this.titleData.roleNameLabel = '当前角色名称：'
        this.titleData.deptNameLabel = '所属组织机构：'
        this.titleData.class = 'title-bottom'
        this.compApi = mgr
        this.opSubmitApi = submitApiMap['operate'][this.pageType]
        this.roleType = 'mgrRole'
        break
    }
  },

  methods: {
    // 初始化
    initPage(id) {
      this.roleId = id
      this.showComp = false
      if (this.system === '租户中台') {
        this.getTree(['opTree', 'dataTree'])
      } else {
        this.getTree(['opTree'])
      }
    },
    // 获取详情与树
    getTree(typeList) {
      const promiseList = [this.compApi.detailApi(this.roleId)]
      typeList.forEach(i => {
        if (this.system === '租户中台') {
          promiseList.push(
            this.compApi[treeApiMap_mgr[this.pageType][i]](this.roleId)
          )
        } else {
          promiseList.push(
            this.compApi[treeApiMap_admin[this.system][this.pageType]](
              this.roleId
            )
          )
        }
      })
      Promise.all(promiseList).then(response => {
        for (let i = 0; i < promiseList.length; i++) {
          const res = response[i]
          // 由于数组第一个是详情，没有对应的type
          const type = typeList[i - 1]
          if (res.code == 1) {
            if (i === 0) {
              this.roleName = res.data.name
              res.data.tenantName ? (this.deptName = res.data.tenantName) : ''
              res.data.deptName ? (this.deptName = res.data.deptName) : ''
              this.deptId = res.data.deptId
            } else {
              if (type === 'opTree') {
                this.opChecked = res.data.childNodeIdList
              }
              this[type] = res.data.list
              this[type].forEach(item => {
                this.expendList[type].push(item.id)
              })
            }
          } else {
            this.$notify({
              showClose: true,
              title: '警告',
              message: res.msg,
              type: 'warning',
              duration: '3000'
            })
          }
        }
        this.showComp = true
      })
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
